<template>
	<view class="box">
		<!-- 商品轮播图 -->
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" indicator-active-color="#fff"
				indicator-color="rgba(255,255,255,.5)" :duration="1000">
				<swiper-item v-for="(item,index) of info.product.slider_image" :key="index" @click="prevImg(item,info.product.slider_image)">
					<view class="swiper-item">
						<image :src="item" ></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 下方信息 -->
		<view class="content">
			<view class="title bold f30 hide-line2" style="height: auto;">{{info.product.store_name}}</view>
			<view class="title bold f30 hide-line2">{{info.product.store_info}}</view>
			<view class="tag f-w">
				<view class="tag1">已售</view>
				<view class="tag2">{{info.sales}}{{info.product.unit_name}}</view>
			</view>
			<view class="three fw-bt">
				<view class="f-w">
					<view class="red f24">拼团价￥<text class="bold">{{info.price}}</text></view>
					<view class="f24 c999 oldprice">原价￥{{info.product.price}}</view>
				</view>
				<view class="f24 c999" v-if="info.product.temp" >{{info.product.temp.name||''}}{{info.product.temp.info||''}}</view>
				<view class="f24 c999" v-else>免配送费</view>
			</view>
			<view class="four f30 bold">已参团{{info.buying_count_num*1*info.success_num}}人</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom f-w">
			<view class="b1" @click="goIndex">
				<view class="bimg f-w">
					<image src="https://jw.xzsw2021.com/static/user/icon_253@2x.png" mode="" style="width: 56rpx;height: 50rpx;"></image>
				</view>
				<view class="c999 f22">拼团首页</view>
			</view>
			<view class="b2" @click="buy">
				<view class="bold f40">￥{{info.price}}</view>
				<view class="f22">{{info.buying_count_num}}人成团</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',//当前商品id
				info:'',
				banner_list: [{
						img: 'https://jw.xzsw2021.com/static/index/tu_18@2x.png'
					},
					{
						img: 'https://jw.xzsw2021.com/static/client/icon_60@2x.png'
					},
					{
						img: 'https://jw.xzsw2021.com/static/client/icon_103@2x.png'
					}
				], //
			}
		},
		onLoad(e) {
			this.id=e.id
			this.getgoodsinfo()
		},
		methods: {
			getgoodsinfo(){
				this.$request('store/product/group/detail/'+this.id,{},'GET').then(res=>{
					this.info=res.data
				})
				
			},
			
			
			// 图片预览
			prevImg(url,imgs){
				
				uni.previewImage({
					current:url,
					urls:imgs,
					success() {
						
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			// 拼团首页
			goIndex(){
				uni.reLaunch({
					url:'/pages/user/spellgroup/spellgroup'
				})
			},
			// 拼团
			buy(){
				console.log('购买');
				uni.navigateTo({
					url:'/pages/user/spellgroup/tuxedo/tuxedo?id='+this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-bottom: 100rpx;
	
		.myimg {
			width: 100%;
			height: 100%;
		}
	
		.red {
			color: #F83535;
		}
	
		.swiper {
			width: 750rpx;
			height: 560rpx;
			swiper {
				width: 750rpx;
				height: 560rpx;
				.swiper-item {
					width: 750rpx;
					height: 560rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
	
		}
		.content{
			position: relative;
			padding: 30rpx;
			.title{
				height: 90rpx;
				line-height: 46rpx;
			}
			.tag{
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				margin: 10rpx 0 28rpx;
				text-align: center;
				line-height: 28rpx;
				font-size: 22rpx;
				.tag1{
					padding: 2rpx 8rpx;
					color: #fff;
					background: linear-gradient(64deg, #FF164E, #FC420A);
					border-radius: 4rpx 0rpx 0rpx 4rpx;
				}
				.tag2{
					padding: 2rpx 8rpx;
					background: #FFF4F5;
					color: #F83535;
					border-radius: 0rpx 4rpx 4rpx 0rpx;
				}
			}
			.three{
				margin-top: 30rpx;
				.bold{
					font-size: 44rpx;
				}
				.oldprice{
					margin-left: 10rpx;
					text-decoration: line-through;
				}
			}
			.four{
				margin-top: 30rpx;
				color: #FC9448;
			}
		}
		.bottom{
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -7rpx 29rpx 0rpx rgba(222, 222, 222, 0.4);
			.b1{
				width: 175rpx;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx -7rpx 29rpx 0rpx rgba(222, 222, 222, 0.4);
				text-align: center;
				overflow: hidden;
				.bimg{
					margin: 10rpx auto 4rpx;
					width: 65rpx;
					height: 49rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.b2{
				flex: 1;
				height: 100rpx;
				color: #fff;
				text-align: center;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				overflow: hidden;
				.bold{
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
